<template>
  <div id="app">
    <button @click="onCreate">
      生成证书海报
    </button>

    <img
      style="width: 100px; height: 100px"
      :src=certDetail.background
      >
  </div>
</template>

<script>
import CertPoster from 'vue-cert-poster'
  export default {
    component:{
     CertPoster
    },
    data() {
      return {
        posterUrl: '',
        
        certDetail: {
          title: '朱旭', // 证书标题
          background:
            'https://zhiyitec.top:2000/image/demo.png', // 证书背景
          stamp:
            '', // 证书盖章
          // greet: '亲爱的小七哥同志', // 称呼
          content:
            '在 2020 年 12 月中，工作认真、能力突出、表现优异，被评为“最佳员工”，特发此证，以资鼓励。', // 证书内容
          // signature: '深圳市某科技有限公司↵2020年12月12日', // 证书署名
          number: 'SHEN-ZHEN-20200415' // 证书编号
        }
      }
    },

    methods: {
      onCreate() {
        this.$certPoster({
          certTitle: this.certDetail.title,
          certBackground: this.certDetail.background,
          certStamp: this.certDetail.stamp,
          certContent: this.certDetail.content,
          certSignature: this.certDetail.signature,
          certNumber: this.certDetail.number,
        }).then(posterUrl => {
          // 生成成功
          this.posterUrl = posterUrl // 海报 base64 地址
        }).catch(()=>{
          // 生成失败
        })
      },
      downloadIamge(imgsrc, name) {//下载图片地址和图片名
          var image = new Image();
          // 解决跨域 Canvas 污染问题
          image.setAttribute("crossOrigin", "anonymous");
          image.onload = function() {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            var a = document.createElement("a"); // 生成一个a元素
            var event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
          };
        image.src = imgsrc;
      }
    }
  }
</script>
